import BaseEndpoint from '../../Base/endpoint'
import BaseNode from '../../Base/node'
import { v4 as uuidv4 } from 'uuid'
import $ from 'jquery'

class ServiceExeNode extends BaseNode {
  [x: string]: any
  constructor(opts) {
    opts.id = opts.id || uuidv4()
    opts.width = 230
    opts.height = 220
    opts.icon = 'bi-fast-forward-fill'
    opts.nodeType = 'SERVICE_EXE'
    opts.titleColor = 'rgb(145 0 239)'
    opts.color = 'rgb(100 10 126)'
    opts.text = '调用服务'
    opts.serviceCode = opts.serviceCode || ''
    opts.appName = opts.appName || ''
    //设置连接点
    opts.endpoints = opts.endpoints || [
      {
        id: uuidv4(),
        type: 'target',
        scope: 'run',
        dataKey: 'from',
        pointType: 'start',
        limitNum: 1,
        orientation: [-1, 0],
        pos: [0, 0.335],
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'source',
        scope: 'run',
        dataKey: 'to',
        pointType: 'end',
        limitNum: 1,
        orientation: [1, 0],
        pos: [0, 0.335],
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'target',
        scope: 'entity',
        dataKey: 'params',
        pointType: 'input',
        orientation: [-1, 0],
        pos: [1, 0.63],
        title: '服务参数（实体）',
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'source',
        scope: 'entity',
        dataKey: 'entity',
        pointType: 'output',
        orientation: [1, 0],
        pos: [0, 0.58],
        title: '返回值（实体）',
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'source',
        scope: 'list',
        dataKey: 'list',
        pointType: 'output',
        orientation: [1, 0],
        pos: [0, 0.68],
        title: '返回值（数据集）',
        Class: BaseEndpoint
      }
    ]
    super(opts)
  }

  mounted() {
    super.mounted()
    this.on('onUpdateServiceCodeEvent', (data) => {
      if (data.id == this.id) {
        this.options.serviceCode = data.serviceCode
        this.options.appName = data.appName
        const $dom = $(this.dom).find('a')
        //刷新显示
        $dom.html('&nbsp;&nbsp;' + this.options.appName + '（' + this.options.serviceCode + '）')
      }
    })
  }

  public draw = (data: any) => {
    const titleColor = data.options.titleColor || '#304fed'

    const color = data.options.color || '#FFC107'

    const _container = `<div class= "base-node"  style="background:${color}"></div>`
    const container = $(_container)
      .css('top', data.top)
      .css('left', data.left)
      .css('width', data.options.width)
      .css('height', data.options.height)
      .attr('id', data.id)

    const _text = `<span class='text' style="background:${titleColor}">&nbsp;<i class="bi ${data.options.icon}"></i>&nbsp;${data.options.text}</span>`
    container.append(_text)

    const _exe = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        background: #d062df;
    ">&nbsp;&nbsp;执行流</span>`

    container.append(_exe)

    const _split = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        margin-top: 27px;
        background: #d062df;
    ">&nbsp;&nbsp;数据</span>`
    container.append(_split)

    const _split_messageCode = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        margin-top:47px;
        background: #d062df;
    ">&nbsp;&nbsp;调用的微服务</span>`
    container.append(_split_messageCode)

    //返回消息
    const serviceCode = `<span title="${data.options.serviceCode}" style="
        width: 100%;
        display: inline-block;
        font-size: 12px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    "><a>&nbsp;&nbsp;${data.options.appName}（${data.options.serviceCode}）</a></span>`
    container.append(serviceCode)
    container.dblclick(() => {
      const _id = data.id
      //触发事件
      this.emit('onModifyServiceCodeEvent', {
        id: _id,
        serviceCode: data.options.serviceCode,
        appName: data.options.appName
      })
      return false
    })

    return container[0]
  }
}
export default ServiceExeNode
